import React,{useState,useEffect} from 'react'
import Carousel from '../home/components/carousel'
import Company from './components/company'
import SearchForm from './components/searchForm'
import TeacherInfo from './components/teacher'
import {connect} from 'dva'

 function index(props:any) {
  const [data,setData] = useState([])
  const [formItem,setFormItem] = useState({
    status:1,
    pageNo:1,
    pageSize:5,
    username:'',
    tags:[]
  })
  const [loading,setLoading] = useState(true)
  const [houseList,setHouseList] = useState([])
  const [hiddenLoading,setHiddenLoading] = useState(true)
  useEffect(()=>{
    search(formItem)
  },[])
  useEffect(()=>{
    setData(props.list)
    setLoading(false)
  },[props.list])
  useEffect(()=>{
    if(!loading && data){
      if(data.length){
        setHouseList([...houseList,...data])
        setLoading(true)
      } else {
        setHiddenLoading(false)
      }
    }
  },[loading])
  function search(params:object){
    props.dispatch({
      type:'search/getListsAsync',
      payload:{
        url:'/api/testInterface',
        params:params
      }
    })
  }
  function searchFormChange(val:any){
    setFormItem(val)
    setHouseList([])
    search(val)
    setHiddenLoading(true)
    setLoading(true)
  }
  function clickButtonOfSearch(obj:object){
    let beforeObj  = Object.assign({},formItem)
    let newObj = Object.assign(beforeObj,obj)
    if(newObj.pageNo === formItem.pageNo){
     
    } else {
      setFormItem(newObj)
      search(newObj)
    }
    
  }
  return (
    <div>
      <Carousel></Carousel>
      <Company></Company>
      <SearchForm search={searchFormChange} form={formItem}></SearchForm>
      {houseList.length 
            && 
          <TeacherInfo 
              dataList={houseList} 
              search={clickButtonOfSearch}
              hiddenLoading={hiddenLoading}
          ></TeacherInfo>}
    </div>
  )
}
export default connect(({search}:any)=>{
  return search
})(index)
